<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    table{
        width: 600px;
        text-align: center;
        margin: 0 auto;
      }
    table,
    th,
    td {
        border: 1px solid #ccc;
        border-collapse: collapse;/*合并表格线*/
    }
    caption {
        font-size: 18px;
        margin-bottom: 10px;
        font-weight: 700;/*加粗*/
    }
    tr {
        height: 40px;
        cursor: pointer;/*改变鼠标样式成小手*/
    }
    /*n是从0开始的，等同于table tr:nth-child(n+2)*/
    table tr:nth-child(1) {
        background-color: #ddd;
    }

    table tr:not(:first-child):hover {
        background-color: #eee;
    }
  </style>
</head>
<body>
  <table>
    <!-- 通常用于表格标题 -->
    <caption>学生列表</caption>
    <tr>
      <th>序号</th>
      <th>姓名</th>
      <th>年龄</th>
      <th>性别</th>
      <th>家乡</th>
    </tr>
    <script>
      let students = [
        {name: '小明', age: 18, gender: '男', hometown: '河北省'},
        {name: '小红', age: 19, gender: '女', hometown: '河南省'},
        {name: '小刚', age: 17, gender: '男', hometown: '山西省'},
        {name: '小丽', age: 18, gender: '女', hometown: '山东省'},
        {name: '晓强', age: 16, gender: '女', hometown: '蓝翔技校'}
      ]
      for(let i = 0; i < students.length; i++){
        document.write(`<tr>
          <td>${i + 1}</td>
          `)
          for(let k in students[i]){
            document.write(`
            <td>${students[i][k]}</td>
            `)
          }
        document.write(`</tr>`)
      }
    </script>
  </table>
</body>
</html>